<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          router
      >
        <el-menu-item v-for="item in SideBar" :index="item.url">
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>{{ item.value }}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import {
  Menu as IconMenu,
} from '@element-plus/icons-vue'
import {computed, reactive} from "vue";
import {useAuthStore} from "@/stores/UseAuthStore";

const authStore = useAuthStore();

const SideBar = reactive([
  {value: "数据产品需求定义", url: "/data/requirements_definition", role: 1},
  {value: "需求审查", url: "/data/data_reviewer", role: 4},
  {value: "数据服务申请", url: "/data/service_request", role: 1},
  {value: "数据服务调度", url: "/data/service_scheduling", role: -1},
  {value: "数据目录检索", url: "/data/cate/list_check", role: -1},
  {value: "数据确权检索", url: "/data/authentic_right_search", role: -1},
  {value: "数据溯源", url: "/data/data_provenanceView", role: -1},
  {value: "数据游走轨迹跟踪", url: "/data/trajectory_tracking", role: -1},
  {value: "数据冲突发现", url: "/data/conflict_discovery", role: -1},
  {value: "数据新鲜度度量", url: "/data/data_freshness", role: -1},
  {value: "组织管理", url: "/management/org_management", role: 5},
  {value: "用户管理", url: "/management/user_management", role: 5},
  {value: "密钥管理", url: "/management/key_management", role: 5},
])

const sideBarValue = computed(() => {
  return SideBar.filter(s => {
    return s.role === -1 || s.role === authStore.userRole;
  })
})

</script>
<style scoped lang="scss">
:deep(.el-menu-item) {
  height: 45px;
}

:deep(.el-menu-item) {
  overflow: hidden;
}
</style>